import { memo, useEffect } from 'react'
import { Form, Input, Checkbox, Select, Button, Space } from 'antd'
import { QuestionRadioPropsType } from '../interface'
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons'
import { OptionType } from '../interface'
import { nanoid } from 'nanoid'

const PropComponent = memo((props: QuestionRadioPropsType) => {
  const { title, isVertical, options, value, disabled, onChange } = props
  const [form] = Form.useForm()

  useEffect(() => {
    form.setFieldsValue({
      title,
      isVertical,
      options,
      value,
    })
  }, [title, isVertical, options, value])

  const handleFormChange = () => {
    if (onChange == null) return

    const { options = [] } = form.getFieldsValue()
    options.forEach((option: OptionType) => {
      if (option.value) return
      option.value = nanoid(5)
    })

    onChange(form.getFieldsValue())
  }

  return (
    <Form
      form={form}
      layout="vertical"
      onValuesChange={handleFormChange}
      initialValues={{
        title,
        isVertical,
        options,
        value,
      }}
      disabled={disabled}
    >
      <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题内容' }]}>
        <Input />
      </Form.Item>
      <Form.Item label="选项">
        <Form.List name="options">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name }, index) => (
                <Space key={key} align="baseline">
                  <Form.Item
                    name={[name, 'text']}
                    rules={[
                      { required: true, message: '选项内容不能为空' },
                      {
                        validator: async (_, text) => {
                          const { options = [] } = form.getFieldsValue()
                          let num = 0
                          options.forEach((option: OptionType) => {
                            if (option.text === text) num++
                          })
                          if (num > 1) {
                            return Promise.reject(new Error('选项内容不能重复'))
                          }
                          return Promise.resolve()
                        },
                      },
                    ]}
                  >
                    <Input placeholder="请输入选项内容" />
                  </Form.Item>
                  {index > 1 && <MinusCircleOutlined onClick={() => remove(name)} />}
                </Space>
              ))}

              <Form.Item>
                <Button
                  icon={<PlusOutlined />}
                  type="link"
                  onClick={() => add({ text: '', value: '' })}
                  block
                >
                  添加选项
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form.Item>
      <Form.Item label="默认选中" name="value">
        <Select
          value={value}
          options={options?.map(({ text, value }) => ({ value, label: text || '' }))}
        />
      </Form.Item>
      <Form.Item label="" name="isVertical" valuePropName="checked">
        <Checkbox>竖向排列</Checkbox>
      </Form.Item>
    </Form>
  )
})

export default PropComponent
